<script>
    if (typeof (EventSource) !== "undefined")
    {
        var source = new EventSource("<?php echo $this->Html->url(array('controller' => 'Hojasrutas', 'action' => 'ajaxpendientes')); ?>");
        //var source = new EventSource("hola.php");
        source.onmessage = function(event)
        {
            document.getElementById("cargaPendientes").innerHTML = event.data + "<br>";
        };
    }
    else
    {
        document.getElementById("cargaPendientes").innerHTML = "0";
    }
</script>
<?php
App::import('Model', 'Hojasruta');
$modeloHr = new Hojasruta();
$idUsuario = $this->Session->read('Auth.User.id');
?>
<header class="header fixed-top clearfix">
    <!--logo start-->
    <div class="brand">

        <a href="index.html" class="logo">
            <img src="<?php echo $this->webroot; ?>images/logo.png" alt="">
        </a>
        <div class="sidebar-toggle-box">
            <div class="fa fa-bars"></div>
        </div>
    </div>
    <!--logo end-->

    <div class="nav notify-row" id="top_menu">
        <!--  notification start -->
        <ul class="nav top-menu">
            <!-- settings start -->
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <i class="fa fa-tasks"></i>
                    <span class="badge bg-success" id="cargaPendientes">0</span>
                </a>
                <?php
                $pendientes = $modeloHr->find('all', array(
                    'recursive' => 0,
                    'conditions' => array(
                        'Hojasruta.destino_id' => $idUsuario,
                        'Hojasruta.estado' => 'Entregado',
                    ),
                    'limit'=>4,
                    'order'=>'Hojasruta.id DESC'
                ));
                //debug($pendientes);
                if (empty($pendientes)):
                    ?>

                    <ul class="dropdown-menu extended tasks-bar">
                        <li>
                            <p class="">No tienes pendientes</p>
                        </li>
                    </ul>

                <?php else: ?>
                    <ul class="dropdown-menu extended tasks-bar">
                        <li>
                            <p class="">Tus Ultimos Pendientes</p>
                        </li>
                        <?php foreach($pendientes as $p): ?>
                        <li>
                            <a href="#">
                                <div class="task-info clearfix">
                                    <div class="desc pull-left">
                                        <h5><?php echo $p['User']['nombre']; ?></h5>
                                        <p><?php echo $p['Documento']['referencia']; ?></p>
                                    </div>
                                    <span class="notification-pie-chart pull-right" data-percent="45">
                                        
                                        <span class="percent"></span>
                                    </span>
                                </div>
                            </a>
                        </li>
                       <?php endforeach; ?>                        
                        <li class="external">
                            <a href="#">Ver Todos...</a>
                        </li>
                    </ul>
                <?php endif; ?>

            </li>
            <!-- settings end -->
            <!-- inbox dropdown start-->
            <li id="header_inbox_bar" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <i class="fa fa-envelope-o"></i>
                    <span class="badge bg-important">4</span>
                </a>
                <ul class="dropdown-menu extended inbox">
                    <li>
                        <p class="red">You have 4 Mails</p>
                    </li>
                    <li>
                        <a href="#">
                            <span class="photo"><img alt="avatar" src="images/avatar-mini.jpg"></span>
                            <span class="subject">
                                <span class="from">Jonathan Smith</span>
                                <span class="time">Just now</span>
                            </span>
                            <span class="message">
                                Hello, this is an example msg.
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="photo"><img alt="avatar" src="images/avatar-mini-2.jpg"></span>
                            <span class="subject">
                                <span class="from">Jane Doe</span>
                                <span class="time">2 min ago</span>
                            </span>
                            <span class="message">
                                Nice admin template
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="photo"><img alt="avatar" src="images/avatar-mini-3.jpg"></span>
                            <span class="subject">
                                <span class="from">Tasi sam</span>
                                <span class="time">2 days ago</span>
                            </span>
                            <span class="message">
                                This is an example msg.
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="photo"><img alt="avatar" src="images/avatar-mini.jpg"></span>
                            <span class="subject">
                                <span class="from">Mr. Perfect</span>
                                <span class="time">2 hour ago</span>
                            </span>
                            <span class="message">
                                Hi there, its a test
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="#">See all messages</a>
                    </li>
                </ul>
            </li>
            <!-- inbox dropdown end -->
            <!-- notification dropdown start-->
            <li id="header_notification_bar" class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                    <i class="fa fa-bell-o"></i>
                    <span class="badge bg-warning">3</span>
                </a>
                <ul class="dropdown-menu extended notification">
                    <li>
                        <p>Notifications</p>
                    </li>
                    <li>
                        <div class="alert alert-info clearfix">
                            <span class="alert-icon"><i class="fa fa-bolt"></i></span>
                            <div class="noti-info">
                                <a href="#"> Server #1 overloaded.</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="alert alert-danger clearfix">
                            <span class="alert-icon"><i class="fa fa-bolt"></i></span>
                            <div class="noti-info">
                                <a href="#"> Server #2 overloaded.</a>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="alert alert-success clearfix">
                            <span class="alert-icon"><i class="fa fa-bolt"></i></span>
                            <div class="noti-info">
                                <a href="#"> Server #3 overloaded.</a>
                            </div>
                        </div>
                    </li>

                </ul>
            </li>
            
            <!-- nuevo documento -->
            
            <li id="header_inbox_bar" class="dropdown">
                <a data-toggle="dropdown" title="Nuevo Documento" class="dropdown-toggle" href="<?php echo $this->Html->url(array('controller'=>'Documentos', 'action'=>'nuevo')); ?>">
                    <i class="fa fa-envelope-o"></i>
                    <span class="badge bg-success">*</span>
                </a>               
            </li>
            <!-- notification dropdown end -->
        </ul>
        <!--  notification end -->
    </div>
    <div class="top-nav clearfix">
        <!--search & user info start-->
        <ul class="nav pull-right top-menu">
            <li>
                <input type="text" class="form-control search" placeholder=" Search">
            </li>
            <!-- user login dropdown start-->
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                    <img alt="" src="<?php echo $this->webroot; ?>images/avatar1_small.jpg">
                    <span class="username"><?php echo $this->Session->read('Auth.User.nombre'); ?></span>
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu extended logout">
                    <li><a href="#"><i class=" fa fa-suitcase"></i>Profile</a></li>
                    <li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
                    <li><a href="<?php echo $this->Html->url(array('controller' => 'Users', 'action' => 'logout')); ?>"><i class="fa fa-key"></i> Log Out</a></li>
                </ul>
            </li>
            <!-- user login dropdown end -->
            <li>
                <div class="toggle-right-box">
                    <div class="fa fa-bars"></div>
                </div>
            </li>
        </ul>
        <!--search & user info end-->
    </div>
</header>